<template>

        <div class="singer-img">
            <van-icon name="arrow-left" class="left" @click="changeUrl1"/>
            <input type="file" @change="newimg($event)">
            <img :src="userInfo.avatar" alt=""><br>
            <van-icon name="checked" color="lightblue"/>
            <p>{{userInfo.userName}}</p>

            <nav class="action">
                <button @click="wirte">编辑</button>
                <button>更换背景</button>
                <input class="input1" type="file" @change="newbgi($event)">
            </nav>

            <div :style="{'background-image': 'url('+imgUrl+')'}"></div>
        </div>
</template>

<script>
    import {getheaderImg, getimg, getusertInfo} from "../api/api";


    export default {
        name: "userHeader",
        data(){
            return{
                active:0,

                imgUrl :"http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg",
            }
        },
        methods:{
            changeUrl(){
                this.$router.push('/index');
            },
            changeUrl1(){
                this.$router.go(-1);
            },
            newimg(e){
                // console.log(e.target.files)
                // this.$store.dispatch("login/getHeaderIm",e.target.files[0]);
                getheaderImg(e.target.files[0]).then(res=>{
                    // console.log(res);
                    if(res.code==0){
                        getusertInfo().then(res=>{
                            // console.log(res);
                            if(res.code==0) {
                                this.userInfo = res.data;
                            }else {
                                this.$toast(res.msg);
                            }
                        })
                    }
                })

            },
            wirte(){
                this.$router.push("/userInfo/changeUser")
            },
            newbgi(e){
                this.flag = false;
                getimg(e.target.files[0]).then(res=>{
                    // console.log(res);
                    if(res.code==0){
                        this.imgUrl = res.url;
                        localStorage.setItem("img",res.url)
                        this.flag = true;
                    }
                })
            }
        },
        created() {
            this.imgUrl = localStorage.getItem("img") || "http://attach.bbs.miui.com/forum/201309/03/150928ozb82vyzhzsv96ov.jpg";
            getusertInfo().then(res=>
            {
                // console.log(res)
                if(res.code==0){

                    this.$store.commit("login/changeUserInfo",res.data)

                }else {
                    this.$toast("错误")
                }
            })

        },
        computed :{
            userInfo (){
                return this.$store.state.login.UserInfo
            }
        }
    }
</script>

<style lang="less" scoped>
    .singer-img {
        width: 100%;
        height: 170px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        position: relative;
        .left{
            position: absolute;
            top:10px;
            left: 5px;
            z-index: 300;
            color: white;
        }

        i {
            position: absolute;
            top: 80px;
            left: 35px;
            font-size: 20px;
            z-index: 200;
        }

        img {
            position: absolute;
            left: 20px;
            top: 40px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            z-index: 100;
        }
        input{
            display: inline-block;
            width: 50px;
            position: absolute;
            top: 50px;
            left: 20px;
            z-index: 105;
            opacity: 0;
        }
        .input1{
            position: absolute;
            top: 0;
            left: 55px;

            z-index: 200;
        }
        p {
            width: 50px;
            text-align: center;
            position: absolute;
            top: 100px;
            left: 20px;
            margin: 0;
            padding: 0;
            height: 30px;
            /*text-align: center;*/

            font-size: 16px;
            margin-bottom: 20px;
        }
        .action{
            position: absolute;
            right: 20px;
            top: 100px;
            z-index: 105;
        }
        button{
            padding: 5px;

            background-color: rgba(232,232,232,0.9);
            border: 0;
            margin-right: 10px;
            font-size: 14px;
            border-radius: 10px;


        }

        div {
            width: 100%;
            height: 100%;
            opacity: 0.2;
            background-image: url('../assets/img/img1.jpg');
            background-size: 100% 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
    }
</style>